<template>
  <div class="payment-com">
    <el-card class="card-com" shadow="never" style="margin-top: 10px;">
      <div class="card-1">
        <searchPanel @refresh="getData('reset')" @changePanel="resizeWin">
          <!-- 查询面板 -->
          <template v-slot:search>
            <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
              <el-row :gutter="20">

                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="渠道商编码">
                    <el-select v-model="listSearch.condition.channelMerchantCodeList" filterable multiple collapse-tags
                      collapse-tags-tooltip @change="getData('search')" clearable placeholder="请选择渠道商编码">
                      <el-option v-for="(item, index) in listCollect.merchantList" :key="item.id" :label="item.value"
                        :value="item.key"></el-option>
                    </el-select>

                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="渠道Key">
                    <ChannelSelect v-model:select-value="listSearch.condition.channelCodeList" :multiple="true"
                      @my-change="getData('search')"></ChannelSelect>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="订单号">
                    <el-input v-model="listSearch.condition.orderNo" clearable @keyup.enter.native="getData('search')"
                      @clear="getData('search')" placeholder="请输入订单号" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="手机号">
                    <el-input v-model="listSearch.condition.mobile" clearable @keyup.enter.native="getData('search')"
                      @clear="getData('search')" placeholder="请输入手机号" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="签约订单号">
                    <el-input v-model="listSearch.condition.outOrderNo" clearable
                      @keyup.enter.native="getData('search')" @clear="getData('search')" placeholder="请输入签约订单号" />
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="支付状态">
                    <BlackSelect v-model:select-value="listSearch.condition.paymentStatusList" :multiple="true"
                      @myChange="getData('search')" :options="paymentStatusList1"></BlackSelect>

                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="下单时间">
                    <TimePicker v-model:operate-time="operateTime1" @time-change="timeChange1($event, 1)"></TimePicker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="支付或退款订单号">
                    <el-input v-model="listSearch.condition.outPaymentOrRefundOrderNo" clearable
                      @keyup.enter.native="getData('search')" @clear="getData('search')" placeholder="请输入支付或退款订单号" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="签约时间">
                    <TimePicker v-model:operate-time="operateTime2" @time-change="timeChange1($event, 2)"></TimePicker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="退款时间">
                    <TimePicker v-model:operate-time="operateTime3" @time-change="timeChange1($event, 3)"></TimePicker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="支付类型">
                    <BlackSelect v-model:select-value="listSearch.condition.paymentTypeList" :multiple="true"
                      @myChange="getData('search')" :options="paymentTypeList"></BlackSelect>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="支付方式">
                    <BlackSelect v-model:select-value="listSearch.condition.paymentMethodList" :multiple="true"
                      @myChange="getData('search')" :options="paymentMethodList"></BlackSelect>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="end">
                <el-button type="primary" @click="getData('search')">查询</el-button>
                <el-button @click="getData('reset')">重置</el-button>
              </el-row>
            </el-form>
          </template>
          <!-- 字段添加 -->
          <template v-slot:edit>
            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_PAYMENT:TCL:EXPORT'" title="下载TCL支付列表"
              @click="btnDown('tcl')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_PAYMENT:TCL:EXPORT'" title="查看下载TCL支付列表"
              @click="btnDownList('tcl')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_PAYMENT:HHT:EXPORT'" title="下载火火兔支付列表"
              @click="btnDown('HHT')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_PAYMENT:HHT:EXPORT'" title="查看下载火火兔支付列表"
              @click="btnDownList('HHT')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_PAYMENT:JXW:EXPORT'" title="下载九学王支付列表"
              @click="btnDown('JXW')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_PAYMENT:JXW:EXPORT'" title="查看下载九学王支付列表"
              @click="btnDownList('JXW')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_PAYMENT:YK:EXPORT'" title="下载优酷签约列表"
              @click="btnDown('YouKu')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_PAYMENT:YK:EXPORT'" title="查看下载优酷签约列表"
              @click="btnDownList('YouKu')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_PAYMENT:NG:EXPORT'" title="下载南瓜签约列表"
              @click="btnDown('NanGuaDianYing')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_PAYMENT:NG:EXPORT'" title="查看下载南瓜签约列表"
              @click="btnDownList('NanGuaDianYing')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_PAYMENT:KEEP:EXPORT'" title="下载Keep签约列表"
              @click="btnDown('Keep')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_PAYMENT:KEEP:EXPORT'" title="查看下载Keep签约列表"
              @click="btnDownList('Keep')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_PAYMENT:CLHK:EXPORT'" title="下载长龙航空签约列表"
              @click="btnDown('ChangLongHangKong')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_PAYMENT:CLHK:EXPORT'" title="查看下载长龙航空签约列表"
              @click="btnDownList('ChangLongHangKong')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_PAYMENT:XMLY:EXPORT'" title="下载喜马拉雅签约列表"
              @click="btnDown('Himalaya')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_PAYMENT:XMLY:EXPORT'" title="查看下载喜马拉雅签约列表"
              @click="btnDownList('Himalaya')"></el-button>

            <DropItem v-model:table-prop="tableProp"></DropItem>
          </template>
        </searchPanel>
      </div>
      <div class="card-2">
        <OnlyTable ref="onlyTableRef" class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total"
          @get-page="handPage" :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
          :loading="pageParams.loadIng">
          <!-- 支付金额 退款金额 同一个字段 -->
          <template #paymentAmount="scope">
            {{ scope.row.paymentType == '付款' ? scope.row.paymentAmount : scope.row.paymentAmount }}
          </template>


          <!-- 支付时间 退款时间 同一个字段-->

          <template #paymentTime="scope">
            {{ scope.row.paymentType == '付款' ? scope.row.paymentTime : scope.row.paymentTime }}
          </template>

          <template #handle="scope">
            <el-button type="primary" size="small" link @click="refund(scope.row)">退款</el-button>
          </template>

        </OnlyTable>
      </div>
    </el-card>
    <downList ref="downListRef" @flash="btnDownList1"></downList>
    <refundCom ref="refundComRef" @refresh="getData('search')"></refundCom>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus"
import _ from "lodash"
import { Download, Plus, List } from '@element-plus/icons-vue'
import { useEnumStore } from '@/store/enumeration';
import { paymentListPageStore } from "./pageStore"
import { useCustomMenuStore } from "@/store/customMenu"
import BlackSelect from '@/components/customSon/blackSelect.vue';


import { exportAssociateMemberOrderPaymentApiPost } from "@/api/fileDown"
import { useComListData } from '@/store/list';


const refundCom = defineAsyncComponent(() => import('./refund.vue'))
const { listCollect, getMerchantList } = useComListData()
const { showCom, getKey } = storeToRefs(useCustomMenuStore())
const selectTitle = ref<any>([])
const onlyTableRef = ref()
const { paymentStatusList, paymentTypeList, paymentMethodList } = storeToRefs(useEnumStore())
const { operateTime, detailData, tableProp, listSearch, pageParams,refundComRef } = storeToRefs(paymentListPageStore())
const { getData1, timeChange, handPage,refund } = paymentListPageStore()
const operateTime1 = ref()
const operateTime2 = ref()
const operateTime3 = ref()
const downListRef = ref<{ show: (title: string, row?: any) => void }>()
// 支付状态
const paymentStatusList1 = ref<any>([
  { key: 1, value: "支付成功", id: 1 },
  { key: 2, value: "支付失败", id: 2 },
  { key: 5, value: "退款成功", id: 5 },
])
onMounted(() => {
  selectTitle.value = tableProp.value.propsList.filter(it => it.hidden && it.label != "操作").map(item => item.prop)

  listSearch.value.condition.supplierCode = getKey
  getData1('reset')
  nextTick(() => {
    const dom1 = document.querySelector(".card-1") as any;
    const dom2 = document.querySelector(".card-com") as any;


    if (dom2) {
      const height = dom2.offsetHeight - dom1.offsetHeight - 70;
      pageParams.value.tableHeight = height;
    }
  })
  getMerchantList()
  window.addEventListener('resize', resizeWin)

})
const btnDown = async (type: string) => {
  try {
    const res = await exportAssociateMemberOrderPaymentApiPost({ condition: listSearch.value.condition })
    if (res.code == 20000) {
      ElMessage({
        type: "success",
        message: "下载成功 请查看下载列表 未出现下载数据 可等待在刷新下载列表！"
      })
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: "下载失败 请稍后再试！"
    })
  }
}
const btnDownList1 = () => {
  console.log(listSearch.value.condition.supplierCode, 'listSearch.value.condition.supplierCode');

  if (listSearch.value.condition.supplierCode == 'TCL') {
    btnDownList('tcl')
  } else if (listSearch.value.condition.supplierCode == 'HuoHuoTu') {
    btnDownList('HHT')
  } else if (listSearch.value.condition.supplierCode == 'JiuXueWang') {
    btnDownList('JXW')
  } else if (listSearch.value.condition.supplierCode == 'YouKu') {
    btnDownList('YouKu')
  } else if (listSearch.value.condition.supplierCode == 'NanGuaDianYing') {
    btnDownList('NanGuaDianYing')
  } else if (listSearch.value.condition.supplierCode == 'Keep') {
    btnDownList('Keep')
  } else if (listSearch.value.condition.supplierCode == 'ChangLongHangKong') {
    btnDownList('ChangLongHangKong')
  } else if (listSearch.value.condition.supplierCode == 'Himalaya') {
    btnDownList('Himalaya')
  }
}
const btnDownList = (type: string) => {
  if (type == 'tcl') {
    downListRef.value?.show('TCL支付下载列表', 'associateMemberOrderPayment')

  } else if (type == 'HHT') {
    downListRef.value?.show('火火兔支付下载列表', 'associateMemberOrderPayment')

  } else if (type == 'JXW') {
    downListRef.value?.show('九学王支付下载列表', 'associateMemberOrderPayment')
  } else if (type == 'YouKu') {
    downListRef.value?.show('优酷联合会员支付下载列表', 'associateMemberOrder')
  } else if (type == 'NanGuaDianYing') {
    downListRef.value?.show('南瓜联合会员支付下载列表', 'associateMemberOrder')
  } else if (type == 'Keep') {
    downListRef.value?.show('Keep联合会员支付下载列表', 'associateMemberOrder')
  } else if (type == 'ChangLongHangKong') {
    downListRef.value?.show('长龙航空联合会员支付下载列表', 'associateMemberOrder')
  } else if (type == 'Himalaya') {
    downListRef.value?.show('喜马拉雅联合会员支付下载列表', 'associateMemberOrder')
  }
}
onUnmounted(() => {
  window.removeEventListener('resize', resizeWin)
})
const getData = (type: string) => {
  if (type == 'reset') {
    operateTime1.value = null
    operateTime2.value = null
    operateTime3.value = null
    onlyTableRef.value.initPagination()
  }
  getData1(type)
  resizeWin()

}
const timeChange1 = (time: any, type: number) => {

  if (type == 1) {
    if (time) {
      listSearch.value.condition.orderTimeStart = time[0]
      listSearch.value.condition.orderTimeEnd = time[1]
    } else {
      listSearch.value.condition.orderTimeStart = null
      listSearch.value.condition.orderTimeEnd = null
    }
  }
  if (type == 2) {
    if (time) {
      listSearch.value.condition.signTimeStart = time[0]
      listSearch.value.condition.signTimeEnd = time[1]
    } else {
      listSearch.value.condition.signTimeStart = null
      listSearch.value.condition.signTimeEnd = null
    }
  }
  if (type == 3) {
    if (time) {
      listSearch.value.condition.paymentTimeStart = time[0]
      listSearch.value.condition.paymentTimeEnd = time[1]
    } else {
      listSearch.value.condition.paymentTimeStart = null
      listSearch.value.condition.paymentTimeEnd = null
    }
  }
  getData('search')

}
const checkboxChange = (val: string[]) => {
  pageParams.value.loadIng = true
  // 进入的 全部为 true 没有的为false
  tableProp.value.propsList = tableProp.value.propsList.map((item: any) => {

    if (val.includes(item.prop)) {
      return {
        ...item,
        hidden: true
      }
    } else if (item.label == "操作") {
      return {
        ...item,
        hidden: true
      }
    } else {
      return {
        ...item,
        hidden: false
      }
    }
  })
  pageParams.value.loadIng = false
}
const showTitle = computed(() => {
  return tableProp.value.propsList.filter(it => it.label != "操作")
})
const resizeWin = _.debounce(() => {
  const dom1 = document.querySelector(".card-1") as any;
  const dom2 = document.querySelector(".card-com") as any;


  if (dom2) {
    const height = dom2.offsetHeight - dom1.offsetHeight - 70;
    pageParams.value.tableHeight = height;
  }
}, 200)
</script>

<style scoped lang="scss">
.payment-com {

  height: calc(100vh - 156px);


  .card-com {
    display: flex;
    flex-direction: column;

    .card-2 {
      flex-grow: 1;
    }
  }
}
</style>